<template>
    <div style="position: absolute;top: 0px; bottom: 0px; width: 100%; background: white;}">
      <van-row>
        <van-col span="24">
          <van-nav-bar fixed :border="false" style="background: none;"
                       @click-left="onClickLeft"
                       @click-right="onRegiest"
                       safe-area-inset-top >
            <template #left>
              <van-icon color="black" style="font-weight:bolder;" name="cross" size="20" />
            </template>
            <template #right>
              <span style="font-size: 1.1em;">注册账号</span>
            </template>
          </van-nav-bar>
        </van-col>
        <van-col span="24" style="margin-top: 10rem;">
          <van-cell-group :border="false" style="background: none;">
            <van-cell  :border="false" style="background: none;">
               <template #title>
                 <span style="font-size: 2rem; letter-spacing:.1em; padding-left: 10px; font-weight: bolder;">胖虎外卖</span>
               </template>
              <template #label>
                <span style="font-size: 1.5rem; letter-spacing:.1em; padding-top: 1rem; display: block; padding-left: 10px;">用户登录</span>
              </template>
            </van-cell>
            <van-cell :border="false" style="background: none; margin-top: 1rem;">
              <van-form  @submit="onSubmit">
                <van-field
                    style="background:none; margin-bottom: 1rem;"
                    size="large"
                    center
                    v-model="username"
                    name="用户名"
                    placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                >

                </van-field>
                <van-field
                    style="background: none;"
                    v-model="password"
                    type="password"
                    name="密码"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                >
                </van-field>
                <div style="margin: 16px;">
                  <van-button round block type="info" native-type="submit">同意协议并登录</van-button>
                </div>
                    <span style=" padding-left: 20px; color:#8c8c8c; ">已阅读并同意</span>
                    <span style="color:#2e62cd; ">《用户服务协议》</span>
              </van-form>
            </van-cell>
          </van-cell-group>
        </van-col>


        <van-col span="24" style="position: fixed; left: 0; bottom: 3rem; width: 100%; height: 5rem; z-index: 999">
          <van-divider>其他方式登录</van-divider>
          <div style="width: 80%; height: 80%; display: flex; align-items: center; justify-content: space-evenly;  margin: 0 auto;">
            <span>
              <icon-svg size="2" icon-class="my-icon-ziyuan1"/>
            </span>
            <span>
              <icon-svg size="2" icon-class="my-icon-taobao"/>
            </span>
            <span>
              <icon-svg size="2" icon-class="my-icon-weibo"/>
            </span>
            <span>
              <icon-svg size="2" icon-class="my-icon-weixin"/>
            </span>
            <span>
              <icon-svg size="2" icon-class="my-icon-qq"/>
            </span>
            <span>
              <icon-svg size="2" icon-class="my-icon-pingguo"/>
            </span>
          </div>
        </van-col>
       </van-row>
    </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      username:'',
      password:'',
    }
  },
  methods:{
    onClickLeft(){
      this.$router.replace("/Info");
    },
    onRegiest(){
      this.$router.replace("/Regiest");
    },
    onSubmit(){

    }
  },
}
</script>

<style scoped>

</style>
